<template>
	<view class="anmed">
		<view class="my-top">
			<image class="header" src="https://xcx.xiaombt.com/img/img/header.png" mode="" :style="{ height: navbarHeight + 'px' }">
			</image>
			<view class="nav">
				<u-navbar title="药用动物" :autoBack='true' bgColor="transparent" leftIconColor='#6C5D47'
					titleStyle='color:#6C5D47' placeholder>
				</u-navbar>
			</view>
		</view>
		<view class="main" :style="{ marginTop: viewHeight + 'px' }">
			<view class="top-nav">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view v-for="(item,index) in topbar" :key="item.id"
						:class="topbarN === item.id?'scroll-view-item_HA':'scroll-view-item_H' "
						@click="topbarClick(item)">
						{{item.title}}
					</view>
				</scroll-view>
			</view>
			<view class="bottom" :style="{ height: bottomHeight + 'px' }">
			<!-- 	<view class="left-nav">
					<scroll-view class="scroll-view_S" scroll-y="true" show-scrollbar="false">
						<view v-for="(item,index) in topbar" :key="item.id"
							:class="topbarN === item.id?'scroll-view-item_SA':'scroll-view-item_S' "
							@click="topbarClick(item)">
							<view class="text">
								{{item.name}}
							</view>

						</view>
					</scroll-view>
				</view> -->
				<view class="right-con">
					<scroll-view class="scroll-view_R" scroll-y="true" show-scrollbar="false">
						<view class="item" v-for="(item,index) in topbarList" :key="item.id" @click="toWhere(item)">
							{{item.title}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {medanList,medanListL} from '@/api/index.js'
	export default {
		data() {
			return {
				viewHeight: null,
				navbarHeight: null,
				topbarN: '1',
				toptabHeight: null,
				bottomHeight: null,
				topbar: [],
				topbarList:[]

			};
		},
		async onLoad() {
			let phoneHeight = 0

			uni.getSystemInfo({
				success: function(info) {
					phoneHeight = info.windowHeight
				}
			});
			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				if (data) {
					this.navbarHeight = data.height;
				}
			}).exec();
			query.select('.my-top').boundingClientRect(data => {
				if (data) {
					this.viewHeight = data.height;
				}
			}).exec();
			query.select('.top-nav').boundingClientRect(data => {
				if (data) {
					this.toptabHeight = data.height;
					this.bottomHeight = phoneHeight - this.navbarHeight - this.toptabHeight

					console.log(phoneHeight, this.navbarHeight)
				}
			}).exec();





		},
		mounted() {
			this.getListL()
		},
		methods: {
			topbarClick(item) {
				this.topbarN = item.id
				this.topbarList=[]
				this.getList()
			},
			getListL(){
				 uni.showLoading({ mask: true });
				medanListL({}).then(res=>{
					uni.hideLoading();
					this.topbar = res.rst
					this.topbarN = this.topbar[0].id
					this.getList()
				})
			},
			getList(){
				 uni.showLoading({ mask: true });
				medanList({type:this.topbarN}).then(res=>{
					uni.hideLoading();
					this.topbarList = res.rst
				})
			},
			toWhere(item){
				uni.navigateTo({
					url: '/page/anmedDetail/index?id='+item.id+'&type=mean'
				})
			}
		}
	};
</script>


<style lang="scss" scoped>
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.bottom {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.left-nav {
			width: 200rpx;
			height: 100%;
			background-color: #fff;
			box-shadow: 0px 8rpx 8rpx 0px rgba(0, 0, 0, 0.25);
		}

		.right-con {
			height: 100%;
			flex: 1;
			background-color: #EDEAE5;
			.scroll-view_R {
					height: 100%;
					white-space: nowrap;
					width: 100%;
					padding: 20rpx 0;
					box-sizing: border-box;
					.item{
						width:90%;
						margin: auto;
						height: 80rpx;
						line-height: 80rpx;
						border-bottom: 1rpx solid rgba(115, 94, 73, 0.5);
						white-space: nowrap; // 强制一行显示
						overflow: hidden; // 超出隐藏
						text-overflow: ellipsis; // 省略号
						color: rgb(108, 93, 71);
						font-family: 思源黑体;
						font-size: 28rpx;
	
					}
					
				}
		}
	}

	.top-nav {
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid #BBAE9B;
		background-color: #fff;
	}

	.scroll-view_H {
		height: 100%;
		white-space: nowrap;
		width: 100%;
		.scroll-view-item_H {
			display: inline-block;
			color: #D4D3C6;
			height: 100%;
			padding: 0 25rpx;
			font-size: 32rpx;
			line-height: 110rpx;
		}
		
		.scroll-view-item_HA {
			display: inline-block;
			color: #6C5D47;
			height: 100%;
			padding: 0 25rpx;
			font-size: 32rpx;
			line-height: 110rpx;
		
		}
	}



	.scroll-view_S {
		height: 100%;
		white-space: nowrap;
		width: 100%;
		.scroll-view-item_S {
			color: #6C5D47;
			width: 100%;
			height: 88rpx;
			font-size: 28rpx;
		
			.text {
				width: 100%;
				height: 100%;
				white-space: nowrap; // 强制一行显示
				overflow: hidden; // 超出隐藏
				text-overflow: ellipsis; // 省略号
				text-align: center;
				line-height: 88rpx;
			}
		}
		
		.scroll-view-item_SA {
			color: #fff;
			width: 100%;
			height: 88rpx;
			font-size: 28rpx;
			background-image: url('https://xcx.xiaombt.com/img/img/select (2).png');
			background-size: 100% 100%;
		
			.text {
				width: 100%;
				height: 100%;
				white-space: nowrap; // 强制一行显示
				overflow: hidden; // 超出隐藏
				text-overflow: ellipsis; // 省略号
				text-align: center;
				line-height: 88rpx;
			}
		}
	}

	



	.my-top {
		width: 100%;
		background-color: #F2EFE9;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;

		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select {
			padding: 20rpx 38rpx;
			background-color: #fff;

			.center {
				width: 100%;
				height: 76rpx;
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

	}
</style>